<template>
  <div class="gre-short-answer">
    <div class="content-wrapper">
      <!-- 左侧材料区 -->
      <div v-if="examStore.currQuestion.title" class="left-content">
        <div class="title">
          <span v-html="mathHTMLToShow(examStore.currQuestion.title)"></span>
        </div>
        <!-- <div class="content-box"></div> -->
      </div>

      <!-- 右侧答题区 -->
      <div class="right-box-list">
        <!-- <askStatus :is-analysis="true" :is-correct="true" /> -->

        <!-- <div style="border: 1px solid #ccc; margin-top: 10px">
          <WeToolbar
            style="width: 100%; border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <WeEditor
            style="width: 100%; height: 100px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div> -->

        <!-- <div
          class="right-content"
          :class="{ 'full-width': !examStore.currQuestion.title }"
        >
          <div class="edit-toolbar">
            <div class="tool-buttons">
              <div
                v-for="(tool, index) in editTools"
                :key="index"
                class="tool-btn"
                :class="{ active: selectedTool === tool.name }"
                @click="handleToolClick(tool.name)"
              >
                {{ tool.label }}
              </div>
            </div>
          </div>

          <div class="answer-area">
            <textarea
              v-model="answerContent"
              class="answer-input"
              placeholder="请在此输入答案..."
              @input="handleAnswerInput"
            ></textarea>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
import { mathHTMLToShow } from "@/utils/index";
import askStatus from "../askStatus.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const props = defineProps({
  leftContent: {
    type: String,
    default: "",
  },
  initialAnswer: {
    type: String,
    default: "",
  },
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref(examStore.currQuestion.answer_content);

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入文章内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

watch(
  () => valueHtml.value,
  (val) => {
    examStore.currQuestion.answer_content = val;
    examStore.currQuestion.is_right = examStore.examInfo.section[
      examStore.currQuestion.sectionIndex
    ].question[examStore.currQuestion.index].is_right = 1;
  }
);

const editTools = [
  { name: "cut", label: "Cut" },
  { name: "paste", label: "Paste" },
  { name: "undo", label: "Undo" },
  { name: "redo", label: "Redo" },
];

const selectedTool = ref("");
const answerContent = ref(props.initialAnswer);

const handleToolClick = (toolName) => {
  selectedTool.value = toolName;
  emit("tool-click", toolName);
};

const handleAnswerInput = () => {
  emit("update:answer", answerContent.value);
};

const emit = defineEmits(["tool-click", "update:answer"]);
</script>

<style lang="scss" scoped>
.gre-short-answer {
  .content-wrapper {
    display: flex;
    gap: 20px;
    min-height: 400px;

    .title {
      word-break: break-all;

      :deep() {
        p {
          display: inline;
          line-height: 32px;
        }
      }
    }

    .left-content {
      flex: 0 0 45%;

      .content-box {
        border-right: 1px solid #ccc;
        // padding: 20px;
        height: 100%;
      }
    }

    .right-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      &.full-width {
        flex: 1;
      }

      .edit-toolbar {
        // margin-bottom: 20px;

        .tool-buttons {
          display: flex;
          // gap: 10px;

          .tool-btn {
            padding: 8px 16px;
            border: 1px solid #dcdfe6;
            border-bottom: none;
            background-color: #fff;
            border-radius: 8px 8px 0px 0px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;

            &:hover {
              background-color: #f5f7fa;
            }

            &.active {
              background-color: #126983;
              border-color: #126983;
              color: #fff;
            }
          }
        }
      }

      .answer-area {
        flex: 1;

        .answer-input {
          width: 100%;
          height: 100%;
          padding: 15px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          resize: none;
          font-size: 14px;
          line-height: 1.6;

          &:focus {
            outline: none;
            border-color: rgba(30, 143, 218, 1);
          }
        }
      }
    }
  }
}
.right-box-list {
  display: flex;
  flex: 1;
}
</style>
